<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/form-control-infrastructure.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:26 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=form-elements.html>← 4.10.6 The button element</a> — <a href=index.html>Table of Contents</a> — <a href=interactive-elements.html>4.11 Interactive elements →</a></nav><ol class=toc><li><ol><li><ol><li><a href=form-control-infrastructure.html#form-control-infrastructure><span class=secno>4.10.18</span> Form control infrastructure</a><ol><li><a href="form-control-infrastructure.html#a-form-control's-value"><span class=secno>4.10.18.1</span> A form control's value</a><li><a href=form-control-infrastructure.html#mutability><span class=secno>4.10.18.2</span> Mutability</a><li><a href=form-control-infrastructure.html#association-of-controls-and-forms><span class=secno>4.10.18.3</span> Association of controls and forms</a></ol><li><a href=form-control-infrastructure.html#attributes-common-to-form-controls><span class=secno>4.10.19</span> Attributes common to form controls</a><ol><li><a href=form-control-infrastructure.html#naming-form-controls:-the-name-attribute><span class=secno>4.10.19.1</span> Naming form controls: the <code>name</code> attribute</a><li><a href=form-control-infrastructure.html#submitting-element-directionality:-the-dirname-attribute><span class=secno>4.10.19.2</span> Submitting element directionality: the <code>dirname</code> attribute</a><li><a href=form-control-infrastructure.html#limiting-user-input-length:-the-maxlength-attribute><span class=secno>4.10.19.3</span> Limiting user input length: the <code>maxlength</code> attribute</a><li><a href=form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute><span class=secno>4.10.19.4</span> Setting minimum input length requirements: the <code>minlength</code> attribute</a><li><a href=form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute><span class=secno>4.10.19.5</span> Enabling and disabling form controls: the <code>disabled</code> attribute</a><li><a href=form-control-infrastructure.html#form-submission-attributes><span class=secno>4.10.19.6</span> Form submission attributes</a><li><a href=form-control-infrastructure.html#autofill><span class=secno>4.10.19.7</span> Autofill</a><ol><li><a href=form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute><span class=secno>4.10.19.7.1</span> Autofilling form controls: the <code>autocomplete</code> attribute</a></ol></ol><li><a href=form-control-infrastructure.html#textFieldSelection><span class=secno>4.10.20</span> APIs for the text control selections</a><li><a href=form-control-infrastructure.html#constraints><span class=secno>4.10.21</span> Constraints</a><ol><li><a href=form-control-infrastructure.html#the-constraint-validation-api><span class=secno>4.10.21.1</span> The constraint validation API</a><li><a href=form-control-infrastructure.html#security-forms><span class=secno>4.10.21.2</span> Security</a></ol><li><a href=form-control-infrastructure.html#form-submission-2><span class=secno>4.10.22</span> Form submission</a><ol><li><a href=form-control-infrastructure.html#url-encoded-form-data><span class=secno>4.10.22.1</span> URL-encoded form data</a><li><a href=form-control-infrastructure.html#multipart-form-data><span class=secno>4.10.22.2</span> Multipart form data</a><li><a href=form-control-infrastructure.html#plain-text-form-data><span class=secno>4.10.22.3</span> Plain text form data</a><li><a href=form-control-infrastructure.html#the-submitevent-interface><span class=secno>4.10.22.4</span> The <code>SubmitEvent</code> interface</a><li><a href=form-control-infrastructure.html#the-formdataevent-interface><span class=secno>4.10.22.5</span> The <code>FormDataEvent</code> interface</a></ol></ol></ol></ol><h4 id=form-control-infrastructure><span class=secno>4.10.18</span> Form control infrastructure<a href=#form-control-infrastructure class=self-link></a></h4>

  <h5 id="a-form-control's-value"><span class=secno>4.10.18.1</span> A form control's value<a href="#a-form-control's-value" class=self-link></a></h5>

  <p>Most form controls have a <dfn id=concept-fe-value>value</dfn> and a <dfn id=concept-fe-checked>checkedness</dfn>. (The latter is only used by <code id="a-form-control's-value:the-input-element"><a href=input.html#the-input-element>input</a></code>
  elements.) These are used to describe how the user interacts with the control.</p>

  <p>A control's <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value">value</a> is its internal state. As such, it
  might not match the user's current input.</p>

  <p class=example>For instance, if a user enters the word "<kbd>three</kbd>" into <a href="input.html#number-state-(type=number)" id="a-form-control's-value:number-state-(type=number)">a numeric field</a> that expects digits, the user's input would
  be the string "three" but the control's <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-2">value</a> would remain
  unchanged. Or, if a user enters the email address "<kbd>  awesome@example.com</kbd>"
  (with leading whitespace) into <a href="input.html#email-state-(type=email)" id="a-form-control's-value:email-state-(type=email)">an email field</a>, the
  user's input would be the string "  awesome@example.com" but the browser's UI for
  email fields might translate that into a <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-3">value</a> of "<code>awesome@example.com</code>" (without the leading whitespace).</p>

  <p id=concept-input-value-dirty-flag><span id=concept-textarea-dirty></span><code id="a-form-control's-value:the-input-element-2"><a href=input.html#the-input-element>input</a></code>
  and <code id="a-form-control's-value:the-textarea-element"><a href=form-elements.html#the-textarea-element>textarea</a></code> elements have a <dfn id=concept-fe-dirty>dirty value flag</dfn>.
  This is used to track the interaction between the <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-4">value</a> and
  default value. If it is false, <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-5">value</a> mirrors the default
  value. If it is true, the default value is ignored.</p>

  <p>Some form controls also have an <dfn id=concept-fe-optional-value>optional value</dfn>.
  This largely mirrors the <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-6">value</a> but doesn't normalize to an
  empty string. <span class=note>This ought to be used sparingly, you generally want <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-7">value</a></span>.</p>

  <p><code id="a-form-control's-value:the-input-element-3"><a href=input.html#the-input-element>input</a></code>, <code id="a-form-control's-value:the-textarea-element-2"><a href=form-elements.html#the-textarea-element>textarea</a></code>, and <code id="a-form-control's-value:the-select-element"><a href=form-elements.html#the-select-element>select</a></code> elements have a
  <dfn id=user-validity>user validity</dfn> boolean. It is initially set to false.</p>

  <p>To define the behavior of constraint validation in the face of the <code id="a-form-control's-value:the-input-element-4"><a href=input.html#the-input-element>input</a></code>
  element's <code id="a-form-control's-value:attr-input-multiple"><a href=input.html#attr-input-multiple>multiple</a></code> attribute, <code id="a-form-control's-value:the-input-element-5"><a href=input.html#the-input-element>input</a></code> elements
  can also have separately defined <dfn id=concept-fe-values>value<em>s</em></dfn>.</p>

  <p>To define the behavior of the <code id="a-form-control's-value:attr-fe-maxlength"><a href=#attr-fe-maxlength>maxlength</a></code> and <code id="a-form-control's-value:attr-fe-minlength"><a href=#attr-fe-minlength>minlength</a></code> attributes, as well as other APIs specific to the
  <code id="a-form-control's-value:the-textarea-element-3"><a href=form-elements.html#the-textarea-element>textarea</a></code> element, all form control with a <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-8">value</a> also have an algorithm for obtaining an <span id=concept-textarea-api-value></span><dfn id=concept-fe-api-value>API value</dfn>. By
  default this algorithm is to simply return the control's <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-9">value</a>.</p>

  <p>The <code id="a-form-control's-value:the-select-element-2"><a href=form-elements.html#the-select-element>select</a></code> element does not have a <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-10">value</a>;
  the <span>selectedness</span> of its <code id="a-form-control's-value:the-option-element"><a href=form-elements.html#the-option-element>option</a></code>
  elements is what is used instead.</p>


  <h5 id=mutability><span class=secno>4.10.18.2</span> Mutability<a href=#mutability class=self-link></a></h5>

  <p>A form control can be designated as <dfn id=concept-fe-mutable><i>mutable</i></dfn>.</p>

  <p class=note>This determines (by means of definitions and requirements in this specification
  that rely on whether an element is so designated) whether or not the user can modify the <a href=#concept-fe-value id=mutability:concept-fe-value>value</a> or <a href=#concept-fe-checked id=mutability:concept-fe-checked>checkedness</a> of a
  form control, or whether or not a control can be automatically prefilled.</p>
  


  <h5 id=association-of-controls-and-forms><span class=secno>4.10.18.3</span> Association of controls and forms<a href=#association-of-controls-and-forms class=self-link></a></h5>

  <p>A <a id=association-of-controls-and-forms:form-associated-element href=forms.html#form-associated-element>form-associated element</a> can have a relationship with a <code id=association-of-controls-and-forms:the-form-element><a href=forms.html#the-form-element>form</a></code>
  element, which is called the element's <dfn data-dfn-for="button,fieldset,input,object,output,select,textarea,img,form-associated custom element" id=form-owner data-export="">form
  owner</dfn>. If a <a id=association-of-controls-and-forms:form-associated-element-2 href=forms.html#form-associated-element>form-associated element</a> is not associated with a <code id=association-of-controls-and-forms:the-form-element-2><a href=forms.html#the-form-element>form</a></code>
  element, its <a href=#form-owner id=association-of-controls-and-forms:form-owner>form owner</a> is said to be null.</p>

  <p>A <a id=association-of-controls-and-forms:form-associated-element-3 href=forms.html#form-associated-element>form-associated element</a> has an associated <dfn id=parser-inserted-flag>parser inserted flag</dfn>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#form</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#attr-form title="Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.">Attributes#attr-form</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>≤4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>≤12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>≤6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>≤12.1+</span></span></div></div></div><p>A <a id=association-of-controls-and-forms:form-associated-element-4 href=forms.html#form-associated-element>form-associated element</a> is, by default, associated with its  ancestor <code id=association-of-controls-and-forms:the-form-element-3><a href=forms.html#the-form-element>form</a></code> element, but, if it is <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed>listed</a>, may have a <dfn data-dfn-for=button,fieldset,input,object,output,select,textarea id=attr-fae-form data-dfn-type=element-attr><code>form</code></dfn> attribute specified to override this.</p>

  <p class=note>This feature allows authors to work around the lack of support for nested
  <code id=association-of-controls-and-forms:the-form-element-4><a href=forms.html#the-form-element>form</a></code> elements.</p>

  <p>If a <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed-2>listed</a> <a id=association-of-controls-and-forms:form-associated-element-5 href=forms.html#form-associated-element>form-associated element</a> has a
  <code id=association-of-controls-and-forms:attr-fae-form><a href=#attr-fae-form>form</a></code> attribute specified, then that attribute's value must be
  the <a href=https://dom.spec.whatwg.org/#concept-id id=association-of-controls-and-forms:concept-id data-x-internal=concept-id>ID</a> of a <code id=association-of-controls-and-forms:the-form-element-5><a href=forms.html#the-form-element>form</a></code> element in the element's
  <a id=association-of-controls-and-forms:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a>.</p>

  

  <dl class=domintro><dt><code><var>element</var>.<span id=dom-fae-form>form</span></code><dd>
    <p>Returns the element's <a href=#form-owner id=association-of-controls-and-forms:form-owner-2>form owner</a>.</p>

    <p>Returns null if there isn't one.</p>
   </dl>

  



  <h4 id=attributes-common-to-form-controls><span class=secno>4.10.19</span> Attributes common to form controls<a href=#attributes-common-to-form-controls class=self-link></a></h4>

  <h5 id=naming-form-controls:-the-name-attribute><span class=secno>4.10.19.1</span> Naming form controls: the <code id=naming-form-controls:-the-name-attribute:attr-fe-name><a href=#attr-fe-name>name</a></code> attribute<a href=#naming-form-controls:-the-name-attribute class=self-link></a></h5>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#name</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=button,fieldset,input,output,select,textarea id=attr-fe-name data-dfn-type=element-attr><code>name</code></dfn> content attribute gives the name of the form control, as
  used in <a href=#form-submission-2 id=naming-form-controls:-the-name-attribute:form-submission-2>form submission</a> and in the <code id=naming-form-controls:-the-name-attribute:the-form-element><a href=forms.html#the-form-element>form</a></code> element's <code id=naming-form-controls:-the-name-attribute:dom-form-elements><a href=forms.html#dom-form-elements>elements</a></code> object. If the attribute is specified, its value must
  not be the empty string or <code>isindex</code>.</p>

  <p class=note>A number of user agents historically implemented special support for first-in-form
  text controls with the name <code>isindex</code>, and this specification previously
  defined related user agent requirements for it. However, some user agents subsequently dropped
  that special support, and the related requirements were removed from this specification. So, to
  avoid problematic reinterpretations in legacy user agents, the name <code>isindex</code>
  is no longer allowed.</p>

  <p>Other than <code>isindex</code>, any non-empty value for <code id=naming-form-controls:-the-name-attribute:attr-form-name><a href=forms.html#attr-form-name>name</a></code> is allowed. An <a id=naming-form-controls:-the-name-attribute:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for
  the name <dfn id=attr-fe-name-charset><code>_charset_</code></dfn> is special: if used as
  the name of a <a href="input.html#hidden-state-(type=hidden)" id="naming-form-controls:-the-name-attribute:hidden-state-(type=hidden)">Hidden</a> control with no <code id=naming-form-controls:-the-name-attribute:attr-input-value><a href=input.html#attr-input-value>value</a></code> attribute, then during submission the <code id=naming-form-controls:-the-name-attribute:attr-input-value-2><a href=input.html#attr-input-value>value</a></code> attribute is automatically given a value consisting of the
  submission character encoding.</p>

  <div class=note>
   <p>DOM clobbering is a common cause of security issues. Avoid using the names of
   built-in form properties with the <code id=naming-form-controls:-the-name-attribute:attr-fe-name-2><a href=#attr-fe-name>name</a></code> content attribute.</p>

   <p>In this example, the <code id=naming-form-controls:-the-name-attribute:the-input-element><a href=input.html#the-input-element>input</a></code> element overrides the built-in <code id=naming-form-controls:-the-name-attribute:attr-fs-method><a href=#attr-fs-method>method</a></code> property:</p>

   <pre><code class='js'><c- a>let</c-> form <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>&quot;form&quot;</c-><c- p>);</c->
<c- a>let</c-> input <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>&quot;input&quot;</c-><c- p>);</c->
form<c- p>.</c->appendChild<c- p>(</c->input<c- p>);</c->

form<c- p>.</c->method<c- p>;</c->           <c- c1>// =&gt; &quot;get&quot;</c->
input<c- p>.</c->name <c- o>=</c-> <c- u>&quot;method&quot;</c-><c- p>;</c-> <c- c1>// DOM clobbering occurs here</c->
form<c- p>.</c->method <c- o>===</c-> input<c- p>;</c-> <c- c1>// =&gt; true</c-></code></pre>

   <p>Since the input name takes precedence over built-in form properties, the JavaScript reference
   <code>form.method</code> will point to the <code id=naming-form-controls:-the-name-attribute:the-input-element-2><a href=input.html#the-input-element>input</a></code> element named "method"
   instead of the built-in <code id=naming-form-controls:-the-name-attribute:attr-fs-method-2><a href=#attr-fs-method>method</a></code> property.</p>
  </div>


  <h5 id=submitting-element-directionality:-the-dirname-attribute><span class=secno>4.10.19.2</span> Submitting element directionality: the <code id=submitting-element-directionality:-the-dirname-attribute:attr-fe-dirname><a href=#attr-fe-dirname>dirname</a></code> attribute<a href=#submitting-element-directionality:-the-dirname-attribute class=self-link></a></h5>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#dirname title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#dirname</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>116+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>17+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=input,textarea id=attr-fe-dirname data-dfn-type=element-attr><code>dirname</code></dfn>
  attribute on a form control element enables the submission of <a id=submitting-element-directionality:-the-dirname-attribute:the-directionality href=dom.html#the-directionality>the directionality</a> of
  the element, and gives the name of the control that contains this value during <a href=#form-submission-2 id=submitting-element-directionality:-the-dirname-attribute:form-submission-2>form
  submission</a>. If such an attribute is specified, its value must not be the empty string.</p>

  <div class=example>

   <p>In this example, a form contains a text control and a submission button:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;addcomment.cgi&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>post</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Comment: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;comment&quot;</c-> <c- e>dirname</c-><c- o>=</c-><c- s>&quot;comment.dir&quot;</c-> <c- e>required</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>button</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;mode&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;add&quot;</c-><c- p>&gt;</c->Post Comment<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

   <p>When the user submits the form, the user agent includes three fields, one called "comment",
   one called "comment.dir", and one called "mode"; so if the user types "Hello", the submission
   body might be something like:</p>

   <pre>comment=Hello&amp;<strong>comment.dir=ltr</strong>&amp;mode=add</pre>

   <p>If the user manually switches to a right-to-left writing direction and enters "<span dir=rtl lang=ar>مرحبا</span>", the submission body might be
   something like:</p>

   <pre>comment=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7&amp;<strong>comment.dir=rtl</strong>&amp;mode=add</pre>

  </div>


  <h5 id=limiting-user-input-length:-the-maxlength-attribute><span class=secno>4.10.19.3</span> Limiting user input length: the <code id=limiting-user-input-length:-the-maxlength-attribute:attr-fe-maxlength><a href=#attr-fe-maxlength>maxlength</a></code> attribute<a href=#limiting-user-input-length:-the-maxlength-attribute class=self-link></a></h5>

  <p>A <dfn data-lt=maxlength data-dfn-type=element-attr id=attr-fe-maxlength data-dfn-for=input,textarea>form
  control <code>maxlength</code> attribute</dfn>, controlled by the <a href=#concept-fe-dirty id=limiting-user-input-length:-the-maxlength-attribute:concept-fe-dirty>dirty value flag</a>, declares a limit on the number of characters a
  user can input. The number of characters is measured using <a id=limiting-user-input-length:-the-maxlength-attribute:length href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> and, in the case
  of <code id=limiting-user-input-length:-the-maxlength-attribute:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> elements, with all newlines normalized to a single character (as opposed
  to CRLF pairs).</p>

  <p>If an element has its <a href=#attr-fe-maxlength id=limiting-user-input-length:-the-maxlength-attribute:attr-fe-maxlength-2>form control <code>maxlength</code> attribute</a> specified, the attribute's value must be a <a id=limiting-user-input-length:-the-maxlength-attribute:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid
  non-negative integer</a>. If the attribute is specified and applying the <span>rules for
  parsing non-negative integers</span> to its value results in a number, then that number is the
  element's <dfn id=maximum-allowed-value-length>maximum allowed value length</dfn>. If the attribute is omitted or parsing its
  value results in an error, then there is no <a href=#maximum-allowed-value-length id=limiting-user-input-length:-the-maxlength-attribute:maximum-allowed-value-length>maximum allowed value length</a>.</p>

  


  <h5 id=setting-minimum-input-length-requirements:-the-minlength-attribute><span class=secno>4.10.19.4</span> Setting minimum input length requirements: the <code id=setting-minimum-input-length-requirements:-the-minlength-attribute:attr-fe-minlength><a href=#attr-fe-minlength>minlength</a></code> attribute<a href=#setting-minimum-input-length-requirements:-the-minlength-attribute class=self-link></a></h5>

  <p>A <dfn data-lt=minlength data-dfn-type=element-attr id=attr-fe-minlength data-dfn-for=input,textarea>form
  control <code>minlength</code> attribute</dfn>, controlled by the <a href=#concept-fe-dirty id=setting-minimum-input-length-requirements:-the-minlength-attribute:concept-fe-dirty>dirty value flag</a>, declares a lower bound on the number of
  characters a user can input. The "number of characters" is measured using <a id=setting-minimum-input-length-requirements:-the-minlength-attribute:length href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> and,
  in the case of <code id=setting-minimum-input-length-requirements:-the-minlength-attribute:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> elements, with all newlines normalized to a single character
  (as opposed to CRLF pairs).</p>

  <p class=note>The <code id=setting-minimum-input-length-requirements:-the-minlength-attribute:attr-fe-minlength-2><a href=#attr-fe-minlength>minlength</a></code> attribute does not imply the
  <code>required</code> attribute. If the form control has no <code>required</code> attribute, then the value can still be omitted; the <code id=setting-minimum-input-length-requirements:-the-minlength-attribute:attr-fe-minlength-3><a href=#attr-fe-minlength>minlength</a></code> attribute only kicks in once the user has entered a
  value at all. If the empty string is not allowed, then the <code>required</code>
  attribute also needs to be set.</p>

  <p>If an element has its <a href=#attr-fe-minlength id=setting-minimum-input-length-requirements:-the-minlength-attribute:attr-fe-minlength-4>form control <code>minlength</code> attribute</a> specified, the attribute's value must be a <a id=setting-minimum-input-length-requirements:-the-minlength-attribute:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid
  non-negative integer</a>. If the attribute is specified and applying the <span>rules for
  parsing non-negative integers</span> to its value results in a number, then that number is the
  element's <dfn id=minimum-allowed-value-length>minimum allowed value length</dfn>. If the attribute is omitted or parsing its
  value results in an error, then there is no <a href=#minimum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:minimum-allowed-value-length>minimum allowed value length</a>.</p>

  <p>If an element has both a <a href=#maximum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:maximum-allowed-value-length>maximum allowed value length</a> and a <a href=#minimum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:minimum-allowed-value-length-2>minimum allowed
  value length</a>, the <a href=#minimum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:minimum-allowed-value-length-3>minimum allowed value length</a> must be smaller than or equal
  to the <a href=#maximum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:maximum-allowed-value-length-2>maximum allowed value length</a>.</p>

  

  <div class=example>

   <p>In this example, there are four text controls. The first is required, and has to be at least 5
   characters long. The other three are optional, but if the user fills one in, the user has to
   enter at least 10 characters.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;/events/menu.cgi&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;post&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Name of Event: <c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-> <c- e>minlength</c-><c- o>=</c-><c- s>5</c-> <c- e>maxlength</c-><c- o>=</c-><c- s>50</c-> <c- e>name</c-><c- o>=</c-><c- s>event</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Describe what you would like for breakfast, if anything:
    <c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;breakfast&quot;</c-> <c- e>minlength</c-><c- o>=</c-><c- s>&quot;10&quot;</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Describe what you would like for lunch, if anything:
    <c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;lunch&quot;</c-> <c- e>minlength</c-><c- o>=</c-><c- s>&quot;10&quot;</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Describe what you would like for dinner, if anything:
    <c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;dinner&quot;</c-> <c- e>minlength</c-><c- o>=</c-><c- s>&quot;10&quot;</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Submit Request&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>


  </div>


  <h5 id=enabling-and-disabling-form-controls:-the-disabled-attribute><span class=secno>4.10.19.5</span> Enabling and disabling form controls: the <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute<a href=#enabling-and-disabling-form-controls:-the-disabled-attribute class=self-link></a></h5>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=button,fieldset,input,object,output,select,textarea id=attr-fe-disabled data-dfn-type=element-attr><code>disabled</code></dfn> content attribute is a <a id=enabling-and-disabling-form-controls:-the-disabled-attribute:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean
  attribute</a>.</p>

  <p class=note>The <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:attr-option-disabled><a href=form-elements.html#attr-option-disabled>disabled</a></code> attribute for
  <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-option-element><a href=form-elements.html#the-option-element>option</a></code> elements and the <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:attr-optgroup-disabled><a href=form-elements.html#attr-optgroup-disabled>disabled</a></code>
  attribute for <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-optgroup-element><a href=form-elements.html#the-optgroup-element>optgroup</a></code> elements are defined separately.</p>

  <p>A form control is <dfn id=concept-fe-disabled>disabled</dfn> if any of the following are
  true:</p>

  <ul><li><p>the element is a <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-button-element><a href=form-elements.html#the-button-element>button</a></code>, <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-input-element><a href=input.html#the-input-element>input</a></code>, <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-select-element><a href=form-elements.html#the-select-element>select</a></code>,
   <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code>, or <a id=enabling-and-disabling-form-controls:-the-disabled-attribute:form-associated-custom-element href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>, and the <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:attr-fe-disabled-2><a href=#attr-fe-disabled>disabled</a></code> attribute is specified on this element (regardless of
   its value); or<li><p>the element is a descendant of a <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-fieldset-element><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element whose <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:attr-fieldset-disabled><a href=form-elements.html#attr-fieldset-disabled>disabled</a></code> attribute is specified, and is <em>not</em> a
   descendant of that <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-fieldset-element-2><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element's first <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-legend-element><a href=form-elements.html#the-legend-element>legend</a></code> element child, if
   any.</ul>

  

  <p class=note>Being <a href=#concept-fe-disabled id=enabling-and-disabling-form-controls:-the-disabled-attribute:concept-fe-disabled>disabled</a> does not prevent all
  modifications to the form control. For example, the control's <a href=#concept-fe-value id=enabling-and-disabling-form-controls:-the-disabled-attribute:concept-fe-value>value</a> or <a href=#concept-fe-checked id=enabling-and-disabling-form-controls:-the-disabled-attribute:concept-fe-checked>checkedness</a>
  could be modified programmatically from JavaScript. Or, they could be indirectly modified by user
  action, e.g., if other non-disabled elements in the control's <a id=enabling-and-disabling-form-controls:-the-disabled-attribute:radio-button-group href=input.html#radio-button-group>radio button group</a> were
  modified.</p>

  


  <h5 id=form-submission-attributes><span class=secno>4.10.19.6</span> Form submission attributes<a href=#form-submission-attributes class=self-link></a></h5>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#Attributes_for_form_submission title="The <form> HTML element represents a document section containing interactive controls for submitting information.">Element/form#Attributes_for_form_submission</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p><dfn id=attributes-for-form-submission>Attributes for form submission</dfn> can be specified both on <code id=form-submission-attributes:the-form-element><a href=forms.html#the-form-element>form</a></code> elements
  and on <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button>submit buttons</a> (elements that represent buttons
  that submit forms, e.g. an <code id=form-submission-attributes:the-input-element><a href=input.html#the-input-element>input</a></code> element whose <code id=form-submission-attributes:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#submit-button-state-(type=submit)" id="form-submission-attributes:submit-button-state-(type=submit)">Submit Button</a> state).

  <p>The <a href=#attributes-for-form-submission id=form-submission-attributes:attributes-for-form-submission>attributes for form submission</a> that may be specified on <code id=form-submission-attributes:the-form-element-2><a href=forms.html#the-form-element>form</a></code>
  elements are <code id=form-submission-attributes:attr-fs-action><a href=#attr-fs-action>action</a></code>, <code id=form-submission-attributes:attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>, <code id=form-submission-attributes:attr-fs-method><a href=#attr-fs-method>method</a></code>, <code id=form-submission-attributes:attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code>, and <code id=form-submission-attributes:attr-fs-target><a href=#attr-fs-target>target</a></code>.</p>

  <p>The corresponding <a href=#attributes-for-form-submission id=form-submission-attributes:attributes-for-form-submission-2>attributes for form submission</a> that may be specified on <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button-2>submit buttons</a> are <code id=form-submission-attributes:attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code id=form-submission-attributes:attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code id=form-submission-attributes:attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code id=form-submission-attributes:attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, and <code id=form-submission-attributes:attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>. When omitted, they default to the values given on
  the corresponding attributes on the <code id=form-submission-attributes:the-form-element-3><a href=forms.html#the-form-element>form</a></code> element.</p>

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#formaction</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>9+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=form,button id=attr-fs-action data-dfn-type=element-attr><code>action</code></dfn> and
  <dfn data-dfn-for=form,button id=attr-fs-formaction data-dfn-type=element-attr><code>formaction</code></dfn>
  content attributes, if specified, must have a value that is a <a id=form-submission-attributes:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL
  potentially surrounded by spaces</a>.</p>

  <p>The <dfn id=concept-fs-action>action</dfn> of an element is the value of the element's
  <code id=form-submission-attributes:attr-fs-formaction-2><a href=#attr-fs-formaction>formaction</a></code> attribute, if the element is a <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button-3>submit button</a> and has such an attribute, or the value of its
  <a href=#form-owner id=form-submission-attributes:form-owner>form owner</a>'s <code id=form-submission-attributes:attr-fs-action-2><a href=#attr-fs-action>action</a></code> attribute, if <em>it</em> has
  one, or else the empty string.</p>

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formmethod title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#formmethod</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>9+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=form,button id=attr-fs-method data-dfn-type=element-attr><code>method</code></dfn> and
  <dfn data-dfn-for=form,button id=attr-fs-formmethod data-dfn-type=element-attr><code>formmethod</code></dfn>
  content attributes are <a href=common-microsyntaxes.html#enumerated-attribute id=form-submission-attributes:enumerated-attribute>enumerated attributes</a> with the
  following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=form/method,button/formmethod,input/formmethod id=attr-fs-method-get-keyword data-dfn-type=attr-value><code>get</code></dfn>
     <td><dfn id=attr-fs-method-get>GET</dfn>
     <td>Indicates the <code id=form-submission-attributes:the-form-element-4><a href=forms.html#the-form-element>form</a></code> will use the HTTP GET method.
    <tr><td><dfn data-dfn-for=form/method,button/formmethod,input/formmethod id=attr-fs-method-post-keyword data-dfn-type=attr-value><code>post</code></dfn>
     <td><dfn id=attr-fs-method-post>POST</dfn>
     <td>Indicates the <code id=form-submission-attributes:the-form-element-5><a href=forms.html#the-form-element>form</a></code> will use the HTTP POST method.
    <tr><td><dfn data-dfn-for=form/method,button/formmethod,input/formmethod id=attr-fs-method-dialog-keyword data-dfn-type=attr-value><code>dialog</code></dfn>
     <td><dfn id=attr-fs-method-dialog>Dialog</dfn>
     <td>Indicates the <code id=form-submission-attributes:the-form-element-6><a href=forms.html#the-form-element>form</a></code> is intended to close the <code id=form-submission-attributes:the-dialog-element><a href=interactive-elements.html#the-dialog-element>dialog</a></code> box in which
     the form finds itself, if any, and otherwise not submit.
  </table>

  <p>The <code id=form-submission-attributes:attr-fs-method-2><a href=#attr-fs-method>method</a></code> attribute's <i id=form-submission-attributes:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=form-submission-attributes:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i>
  are both the <a href=#attr-fs-method-get id=form-submission-attributes:attr-fs-method-get>GET</a> state.</p>

  <p>The <code id=form-submission-attributes:attr-fs-formmethod-2><a href=#attr-fs-formmethod>formmethod</a></code> attribute has no <i id=form-submission-attributes:missing-value-default-2><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i>, and its <i id=form-submission-attributes:invalid-value-default-2><a href=common-microsyntaxes.html#invalid-value-default>invalid value
  default</a></i> is the <a href=#attr-fs-method-get id=form-submission-attributes:attr-fs-method-get-2>GET</a> state.</p>

  <p>The <dfn id=concept-fs-method>method</dfn> of an element is one of those states. If the
  element is a <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button-4>submit button</a> and has a <code id=form-submission-attributes:attr-fs-formmethod-3><a href=#attr-fs-formmethod>formmethod</a></code> attribute, then the element's <a href=#concept-fs-method id=form-submission-attributes:concept-fs-method>method</a> is that attribute's state; otherwise, it is the <a href=#form-owner id=form-submission-attributes:form-owner-2>form
  owner</a>'s <code id=form-submission-attributes:attr-fs-method-3><a href=#attr-fs-method>method</a></code> attribute's state.</p>

  <div class=example>

   <p>Here the <code id=form-submission-attributes:attr-fs-method-4><a href=#attr-fs-method>method</a></code> attribute is used to explicitly specify
   the default value, "<code id=form-submission-attributes:attr-fs-method-get-keyword><a href=#attr-fs-method-get-keyword>get</a></code>", so that the search
   query is submitted in the URL:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;get&quot;</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;/search.cgi&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Search terms: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>search</c-> <c- e>name</c-><c- o>=</c-><c- s>q</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>On the other hand, here the <code id=form-submission-attributes:attr-fs-method-5><a href=#attr-fs-method>method</a></code> attribute is used to
   specify the value "<code id=form-submission-attributes:attr-fs-method-post-keyword><a href=#attr-fs-method-post-keyword>post</a></code>", so that the user's
   message is submitted in the HTTP request's body:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;post&quot;</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;/post-message.cgi&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Message: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>m</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Submit message&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In this example, a <code id=form-submission-attributes:the-form-element-7><a href=forms.html#the-form-element>form</a></code> is used with a <code id=form-submission-attributes:the-dialog-element-2><a href=interactive-elements.html#the-dialog-element>dialog</a></code>. The <code id=form-submission-attributes:attr-fs-method-6><a href=#attr-fs-method>method</a></code> attribute's "<code id=form-submission-attributes:attr-fs-method-dialog-keyword><a href=#attr-fs-method-dialog-keyword>dialog</a></code>" keyword is used to have the dialog
   automatically close when the form is submitted.</p>

   <pre lang=en-GB><code class='html'><c- p>&lt;</c-><c- f>dialog</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;ship&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>dialog</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->A ship has arrived in the harbour.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;board&quot;</c-><c- p>&gt;</c->Board the ship<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;call&quot;</c-><c- p>&gt;</c->Call to the captain<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dialog</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>var</c-> ship <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;ship&apos;</c-><c- p>);</c->
 ship<c- p>.</c->showModal<c- p>();</c->
 ship<c- p>.</c->onclose <c- o>=</c-> <c- a>function</c-> <c- p>(</c->event<c- p>)</c-> <c- p>{</c->
   <c- k>if</c-> <c- p>(</c->ship<c- p>.</c->returnValue <c- o>==</c-> <c- t>&apos;board&apos;</c-><c- p>)</c-> <c- p>{</c->
     <c- c1>// ...</c->
   <c- p>}</c-> <c- k>else</c-> <c- p>{</c->
     <c- c1>// ...</c->
   <c- p>}</c->
 <c- p>};</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  </div>

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formenctype title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#formenctype</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>9+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=form,button id=attr-fs-enctype data-dfn-type=element-attr><code>enctype</code></dfn> and
  <dfn data-dfn-for=form,button id=attr-fs-formenctype data-dfn-type=element-attr><code>formenctype</code></dfn>
  content attributes are <a href=common-microsyntaxes.html#enumerated-attribute id=form-submission-attributes:enumerated-attribute-2>enumerated attributes</a> with the
  following keywords and states:</p>

  <ul><li>The "<dfn data-dfn-for=form/enctype,button/enctype id=attr-fs-enctype-urlencoded data-dfn-type=attr-value><code>application/x-www-form-urlencoded</code></dfn>" keyword and
   corresponding state.<li>The "<dfn data-dfn-for=form/enctype,button/enctype id=attr-fs-enctype-formdata data-dfn-type=attr-value><code>multipart/form-data</code></dfn>" keyword and corresponding
   state.<li>The "<dfn data-dfn-for=form/enctype,button/enctype id=attr-fs-enctype-text data-dfn-type=attr-value><code>text/plain</code></dfn>" keyword and corresponding state.</ul>

  <p>The attribute's <i id=form-submission-attributes:missing-value-default-3><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=form-submission-attributes:invalid-value-default-3><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <code id=form-submission-attributes:attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code> state.</p>

  <p>The <code id=form-submission-attributes:attr-fs-formenctype-2><a href=#attr-fs-formenctype>formenctype</a></code> attribute has no <i id=form-submission-attributes:missing-value-default-4><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i>, and its <i id=form-submission-attributes:invalid-value-default-4><a href=common-microsyntaxes.html#invalid-value-default>invalid value
  default</a></i> is the <code id=form-submission-attributes:attr-fs-enctype-urlencoded-2><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code> state.</p>

  <p>The <dfn id=concept-fs-enctype>enctype</dfn> of an element is one of those three states.
  If the element is a <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button-5>submit button</a> and has a <code id=form-submission-attributes:attr-fs-formenctype-3><a href=#attr-fs-formenctype>formenctype</a></code> attribute, then the element's <a href=#concept-fs-enctype id=form-submission-attributes:concept-fs-enctype>enctype</a> is that attribute's state; otherwise, it is the
  <a href=#form-owner id=form-submission-attributes:form-owner-3>form owner</a>'s <code id=form-submission-attributes:attr-fs-enctype-2><a href=#attr-fs-enctype>enctype</a></code> attribute's state.</p>

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formtarget title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#formtarget</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>9+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=form,button id=attr-fs-target data-dfn-type=element-attr><code>target</code></dfn> and
  <dfn data-dfn-for=form,button id=attr-fs-formtarget data-dfn-type=element-attr><code>formtarget</code></dfn>
  content attributes, if specified, must have values that are <a href=document-sequences.html#valid-navigable-target-name-or-keyword id=form-submission-attributes:valid-navigable-target-name-or-keyword>valid navigable target names or keywords</a>.</p>

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formnovalidate title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#formnovalidate</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=form,button id=attr-fs-novalidate data-dfn-type=element-attr><code>novalidate</code></dfn> and <dfn data-dfn-for=form,button id=attr-fs-formnovalidate data-dfn-type=element-attr><code>formnovalidate</code></dfn> content attributes are <a href=common-microsyntaxes.html#boolean-attribute id=form-submission-attributes:boolean-attribute>boolean attributes</a>. If present, they indicate that the form is
  not to be validated during submission.</p>

  <p>The <dfn id=concept-fs-novalidate>no-validate state</dfn> of an element is true if the
  element is a <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button-6>submit button</a> and the element's <code id=form-submission-attributes:attr-fs-formnovalidate-2><a href=#attr-fs-formnovalidate>formnovalidate</a></code> attribute is present, or if the element's
  <a href=#form-owner id=form-submission-attributes:form-owner-4>form owner</a>'s <code id=form-submission-attributes:attr-fs-novalidate-2><a href=#attr-fs-novalidate>novalidate</a></code> attribute is present,
  and false otherwise.</p>

  <div class=example>

   <p>This attribute is useful to include "save" buttons on forms that have validation constraints,
   to allow users to save their progress even though they haven't fully entered the data in the
   form. The following example shows a simple form that has two required fields. There are three
   buttons: one to submit the form, which requires both fields to be filled in; one to save the form
   so that the user can come back and fill it in later; and one to cancel the form altogether.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;editor.cgi&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;post&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Name: <c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-> <c- e>name</c-><c- o>=</c-><c- s>fn</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Essay: <c- p>&lt;</c-><c- f>textarea</c-> <c- e>required</c-> <c- e>name</c-><c- o>=</c-><c- s>essay</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>name</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Submit essay&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>formnovalidate</c-> <c- e>name</c-><c- o>=</c-><c- s>save</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Save essay&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>formnovalidate</c-> <c- e>name</c-><c- o>=</c-><c- s>cancel</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Cancel&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>

  


  <h5 id=autofill><span class=secno>4.10.19.7</span> Autofill<a href=#autofill class=self-link></a></h5>

  <h6 id=autofilling-form-controls:-the-autocomplete-attribute><span class=secno>4.10.19.7.1</span> Autofilling form controls: the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute<a href=#autofilling-form-controls:-the-autocomplete-attribute class=self-link></a></h6>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete title="The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.">Attributes/autocomplete</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>14+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>User agents sometimes have features for helping users fill forms in, for example prefilling the
  user's address based on earlier user input. The <dfn data-dfn-for=button,fieldset,input,object,output,select,textarea id=attr-fe-autocomplete data-dfn-type=element-attr><code>autocomplete</code></dfn> content attribute can be used to hint to
  the user agent how to, or indeed whether to, provide such a feature.</p>

  

  <p>There are two ways this attribute is used. When wearing the <dfn id=autofill-expectation-mantle>autofill expectation
  mantle</dfn>, the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-2><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute describes what
  input is expected from users. When wearing the <dfn id=autofill-anchor-mantle>autofill anchor mantle</dfn>, the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-3><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute describes the meaning of the given
  value.</p>

  <p>On an <code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element><a href=input.html#the-input-element>input</a></code> element whose <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is
  in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)">Hidden</a> state, the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-4><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute wears the <a href=#autofill-anchor-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-anchor-mantle>autofill anchor
  mantle</a>. In all other cases, it wears the <a href=#autofill-expectation-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-expectation-mantle>autofill expectation mantle</a>.</p>

  <p>When wearing the <a href=#autofill-expectation-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-expectation-mantle-2>autofill expectation mantle</a>, the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-5><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute, if specified, must have a value that
  is an ordered <a id=autofilling-form-controls:-the-autocomplete-attribute:set-of-space-separated-tokens href=common-microsyntaxes.html#set-of-space-separated-tokens>set of space-separated tokens</a> consisting of either a single token that
  is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>", or a single token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
  case-insensitive</a> match for the string "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>",
  or <a href=#autofill-detail-tokens id=autofilling-form-controls:-the-autocomplete-attribute:autofill-detail-tokens>autofill detail tokens</a>.</p>

  <p>When wearing the <a href=#autofill-anchor-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-anchor-mantle-2>autofill anchor
  mantle</a>, the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-6><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute, if specified, must have a value that is an ordered <a id=autofilling-form-controls:-the-autocomplete-attribute:set-of-space-separated-tokens-2 href=common-microsyntaxes.html#set-of-space-separated-tokens>set of
  space-separated tokens</a> consisting of just <a href=#autofill-detail-tokens id=autofilling-form-controls:-the-autocomplete-attribute:autofill-detail-tokens-2>autofill detail tokens</a> (i.e. the
  "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-on-2><a href=#attr-fe-autocomplete-on>on</a></code>" and "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-off-2><a href=#attr-fe-autocomplete-off>off</a></code>" keywords are not allowed).</p>

  <p><dfn id=autofill-detail-tokens>Autofill detail tokens</dfn> are the following, in the order given below:</p>

  <ol><li>

    <p>Optionally, a token whose first eight characters are an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a>
    match for the string "<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-section data-dfn-type=attr-value><code>section-</code></dfn>", meaning that the field belongs to
    the named group.</p>

    <div class=example>

     <p>For example, if there are two shipping addresses in the form, then they could be marked up
     as:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->Ship the blue gift to...<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c-> Address:     <c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>ba</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;section-blue shipping street-address&quot;</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c-> City:        <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>bc</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;section-blue shipping address-level2&quot;</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c-> Postal Code: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>bp</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;section-blue shipping postal-code&quot;</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->Ship the red gift to...<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c-> Address:     <c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>ra</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;section-red shipping street-address&quot;</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c-> City:        <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>rc</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;section-red shipping address-level2&quot;</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c-> Postal Code: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>rp</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;section-red shipping postal-code&quot;</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></code></pre>

    </div>
   <li>
    <p>Optionally, a token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-4 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the
    following strings:</p>

    <ul class=brief><li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-shipping data-dfn-type=attr-value><code>shipping</code></dfn>", meaning the field is part of the
     shipping address or contact information

     <li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-billing data-dfn-type=attr-value><code>billing</code></dfn>", meaning the field is part of the
     billing address or contact information
    </ul>
   <li>
    <p>Either of the following two options:</p>

    <ul><li>
      <p>A token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-5 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the following
      <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field>autofill field</a> names, excluding those that are <a href=#inappropriate-for-the-control id=autofilling-form-controls:-the-autocomplete-attribute:inappropriate-for-the-control>inappropriate for the
      control</a>:</p>

      <ul class=brief><li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-name><a href=#attr-fe-autocomplete-name>name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-honorific-prefix><a href=#attr-fe-autocomplete-honorific-prefix>honorific-prefix</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-given-name><a href=#attr-fe-autocomplete-given-name>given-name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-additional-name><a href=#attr-fe-autocomplete-additional-name>additional-name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-family-name><a href=#attr-fe-autocomplete-family-name>family-name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-honorific-suffix><a href=#attr-fe-autocomplete-honorific-suffix>honorific-suffix</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-nickname><a href=#attr-fe-autocomplete-nickname>nickname</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-username><a href=#attr-fe-autocomplete-username>username</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-new-password><a href=#attr-fe-autocomplete-new-password>new-password</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-current-password><a href=#attr-fe-autocomplete-current-password>current-password</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-one-time-code><a href=#attr-fe-autocomplete-one-time-code>one-time-code</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-organization-title><a href=#attr-fe-autocomplete-organization-title>organization-title</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-organization><a href=#attr-fe-autocomplete-organization>organization</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-street-address><a href=#attr-fe-autocomplete-street-address>street-address</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-line1><a href=#attr-fe-autocomplete-address-line1>address-line1</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-line2><a href=#attr-fe-autocomplete-address-line2>address-line2</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-line3><a href=#attr-fe-autocomplete-address-line3>address-line3</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level4><a href=#attr-fe-autocomplete-address-level4>address-level4</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level3><a href=#attr-fe-autocomplete-address-level3>address-level3</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level2><a href=#attr-fe-autocomplete-address-level2>address-level2</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level1><a href=#attr-fe-autocomplete-address-level1>address-level1</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-country><a href=#attr-fe-autocomplete-country>country</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-country-name><a href=#attr-fe-autocomplete-country-name>country-name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-postal-code><a href=#attr-fe-autocomplete-postal-code>postal-code</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-name><a href=#attr-fe-autocomplete-cc-name>cc-name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-given-name><a href=#attr-fe-autocomplete-cc-given-name>cc-given-name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-additional-name><a href=#attr-fe-autocomplete-cc-additional-name>cc-additional-name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-family-name><a href=#attr-fe-autocomplete-cc-family-name>cc-family-name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-number><a href=#attr-fe-autocomplete-cc-number>cc-number</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp-month><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp-year><a href=#attr-fe-autocomplete-cc-exp-year>cc-exp-year</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-csc><a href=#attr-fe-autocomplete-cc-csc>cc-csc</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-type><a href=#attr-fe-autocomplete-cc-type>cc-type</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-transaction-currency><a href=#attr-fe-autocomplete-transaction-currency>transaction-currency</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-transaction-amount><a href=#attr-fe-autocomplete-transaction-amount>transaction-amount</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-language><a href=#attr-fe-autocomplete-language>language</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-bday><a href=#attr-fe-autocomplete-bday>bday</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-bday-day><a href=#attr-fe-autocomplete-bday-day>bday-day</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-bday-month><a href=#attr-fe-autocomplete-bday-month>bday-month</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-bday-year><a href=#attr-fe-autocomplete-bday-year>bday-year</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-sex><a href=#attr-fe-autocomplete-sex>sex</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-url><a href=#attr-fe-autocomplete-url>url</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-photo><a href=#attr-fe-autocomplete-photo>photo</a></code>"
      </ul>

      <p>(See the table below for descriptions of these values.)</p>
     <li>
      <p>The following, in the given order:</p>

      <ol><li>
        <p>Optionally, a token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-6 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the
        following strings:</p>

        <ul class=brief><li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-home data-dfn-type=attr-value><code>home</code></dfn>", meaning the field is for contacting
         someone at their residence

         <li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-work data-dfn-type=attr-value><code>work</code></dfn>", meaning the field is for contacting
         someone at their workplace

         <li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-mobile data-dfn-type=attr-value><code>mobile</code></dfn>", meaning the
         field is for contacting someone regardless of location

         <li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-fax data-dfn-type=attr-value><code>fax</code></dfn>", meaning the field describes a fax
         machine's contact details

         <li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-pager data-dfn-type=attr-value><code>pager</code></dfn>", meaning the field describes a
         pager's or beeper's contact details
        </ul>
       <li>
        <p>A token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-7 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the following
        <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-2>autofill field</a> names, excluding those that are <a href=#inappropriate-for-the-control id=autofilling-form-controls:-the-autocomplete-attribute:inappropriate-for-the-control-2>inappropriate for the
        control</a>:</p>

        <ul class=brief><li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel><a href=#attr-fe-autocomplete-tel>tel</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-country-code><a href=#attr-fe-autocomplete-tel-country-code>tel-country-code</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-national><a href=#attr-fe-autocomplete-tel-national>tel-national</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-area-code><a href=#attr-fe-autocomplete-tel-area-code>tel-area-code</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-local><a href=#attr-fe-autocomplete-tel-local>tel-local</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-local-prefix><a href=#attr-fe-autocomplete-tel-local-prefix>tel-local-prefix</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-local-suffix><a href=#attr-fe-autocomplete-tel-local-suffix>tel-local-suffix</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-extension><a href=#attr-fe-autocomplete-tel-extension>tel-extension</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-email><a href=#attr-fe-autocomplete-email>email</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-impp><a href=#attr-fe-autocomplete-impp>impp</a></code>"
        </ul>

        <p>(See the table below for descriptions of these values.)</p>
       </ol>
     </ul>
   <li><p>Optionally, a token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-8 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string
   "<dfn id=attr-fe-autocomplete-webauthn><code>webauthn</code></dfn>", meaning the user agent
   should show <a href=https://w3c.github.io/webauthn/#public-key-credential id=autofilling-form-controls:-the-autocomplete-attribute:public-key-credential data-x-internal=public-key-credential>public key credentials</a> available via
   <code id=autofilling-form-controls:-the-autocomplete-attribute:conditional-mediation><a data-x-internal=conditional-mediation href=https://w3c.github.io/webappsec-credential-management/#dom-credentialmediationrequirement-conditional>conditional</a></code> mediation when the user interacts with the
   form control. <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-webauthn><a href=#attr-fe-autocomplete-webauthn>webauthn</a></code> is only valid for
   <code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-2><a href=input.html#the-input-element>input</a></code> and <code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> elements.</ol>

  <p>As noted earlier, the meaning of the attribute and its keywords depends on the mantle that the
  attribute is wearing.</p>

  <dl class=switch><dt>When wearing the <a href=#autofill-expectation-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-expectation-mantle-3>autofill expectation mantle</a>...

   <dd>
    <p>The "<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-off data-dfn-type=attr-value><code>off</code></dfn>" keyword indicates either that the control's
    input data is particularly sensitive (for example the activation code for a nuclear weapon); or
    that it is a value that will never be reused (for example a one-time-key for a bank login) and
    the user will therefore have to explicitly enter the data each time, instead of being able to
    rely on the UA to prefill the value for them; or that the document provides its own autocomplete
    mechanism and does not want the user agent to provide autocompletion values.</p>

    <p>The "<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-on data-dfn-type=attr-value><code>on</code></dfn>" keyword indicates that the user agent is
    allowed to provide the user with autocompletion values, but does not provide any further
    information about what kind of data the user might be expected to enter. User agents would have
    to use heuristics to decide what autocompletion values to suggest.</p>

    <p>The <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-3>autofill field</a> listed above indicate that the user agent is allowed to
    provide the user with autocompletion values, and specifies what kind of value is expected. The
    meaning of each such keyword is described in the table below.</p>

    <p>If the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-7><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute is omitted, the default
    value corresponding to the state of the element's <a href=#form-owner id=autofilling-form-controls:-the-autocomplete-attribute:form-owner>form owner</a>'s <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-form-autocomplete><a href=forms.html#attr-form-autocomplete>autocomplete</a></code> attribute is used instead (either "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-on-3><a href=#attr-fe-autocomplete-on>on</a></code>" or "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-off-3><a href=#attr-fe-autocomplete-off>off</a></code>"). If there is no <a href=#form-owner id=autofilling-form-controls:-the-autocomplete-attribute:form-owner-2>form owner</a>, then the
    value "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-on-4><a href=#attr-fe-autocomplete-on>on</a></code>" is used.</p>
   <dt>When wearing the <a href=#autofill-anchor-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-anchor-mantle-3>autofill anchor mantle</a>...

   <dd>
    <p>The <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-4>autofill field</a> listed above indicate that the value of the particular kind
    of value specified is that value provided for this element. The meaning of each such keyword is
    described in the table below.</p>

    <div class=example>

     <p>In this example the page has explicitly specified the currency and amount of the
     transaction. The form requests a credit card and other billing details. The user agent could
     use this information to suggest a credit card that it knows has sufficient balance and that
     supports the relevant currency.</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>post</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;step2.cgi&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>hidden</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>transaction-currency</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;CHF&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>hidden</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>transaction-amount</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;15.00&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Credit card number: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>inputmode</c-><c- o>=</c-><c- s>numeric</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>cc-number</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Expiry Date: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>month</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>cc-exp</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Continue...&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

    </div>
   </dl>

  <p>The <dfn id=autofill-field>autofill field</dfn> keywords relate to each other as described in the table below. Each field name
  listed on a row of this table corresponds to the meaning given in the cell for that row in the
  column labeled "Meaning". Some fields correspond to subparts of other fields; for example, a
  credit card expiry date can be expressed as one field giving both the month and year of expiry
  ("<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp-2><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>"), or as two fields, one giving the
  month ("<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp-month-2><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>") and one the year
  ("<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp-year-2><a href=#attr-fe-autocomplete-cc-exp-year>cc-exp-year</a></code>"). In such cases, the names of
  the broader fields cover multiple rows, in which the narrower fields are defined.</p>

  <p class=note>Generally, authors are encouraged to use the broader fields rather than the
  narrower fields, as the narrower fields tend to expose Western biases. For example, while it is
  common in some Western cultures to have a given name and a family name, in that order (and thus
  often referred to as a <i>first name</i> and a <i>surname</i>), many cultures put the family name
  first and the given name second, and many others simply have one name (a <i>mononym</i>). Having a
  single field is therefore more flexible.</p>

  <p>Some fields are only appropriate for certain form controls. An <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-5>autofill field</a> name
  is <dfn id=inappropriate-for-the-control>inappropriate for a control</dfn> if the control
  does not belong to the group listed for that <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-6>autofill field</a> in the fifth column of
  the first row describing that <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-7>autofill field</a> in the table below. What controls fall
  into each group is described below the table.</p>

  <table><thead><tr><th colspan=4> Field name
     <th> Meaning
     <th> Canonical Format
     <th> Canonical Format Example
     <th> Control group
   <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-name data-dfn-type=attr-value><code>name</code></dfn>"
     <td>Full name
     <td>Free-form text, no newlines
     <td>Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text>Text</a>
    <tr><td rowspan=5 class=non-rectangular-cell-indentation>
      <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-honorific-prefix data-dfn-type=attr-value><code>honorific-prefix</code></dfn>"
      <td>Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "<span lang=fr>M<sup>lle</sup></span>")
      <td>Free-form text, no newlines
      <td>Sir
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-2>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-given-name data-dfn-type=attr-value><code>given-name</code></dfn>"
      <td>Given name (in some Western cultures, also known as the <i>first name</i>)
      <td>Free-form text, no newlines
      <td>Timothy
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-3>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-additional-name data-dfn-type=attr-value><code>additional-name</code></dfn>"
      <td>Additional names (in some Western cultures, also known as <i>middle names</i>, forenames other than the first name)
      <td>Free-form text, no newlines
      <td>John
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-4>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-family-name data-dfn-type=attr-value><code>family-name</code></dfn>"
      <td>Family name (in some Western cultures, also known as the <i>last name</i> or <i>surname</i>)
      <td>Free-form text, no newlines
      <td>Berners-Lee
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-5>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-honorific-suffix data-dfn-type=attr-value><code>honorific-suffix</code></dfn>"
      <td>Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II")
      <td>Free-form text, no newlines
      <td>OM, KBE, FRS, FREng, FRSA
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-6>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-nickname data-dfn-type=attr-value><code>nickname</code></dfn>"
     <td>Nickname, screen name, handle: a typically short name used instead of the full name
     <td>Free-form text, no newlines
     <td>Tim
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-7>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-organization-title data-dfn-type=attr-value><code>organization-title</code></dfn>"
     <td>Job title (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director")
     <td>Free-form text, no newlines
     <td>Professor
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-8>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-username data-dfn-type=attr-value><code>username</code></dfn>"
     <td>A username
     <td>Free-form text, no newlines
     <td>timbl
     <td><a href=#control-group-username id=autofilling-form-controls:-the-autocomplete-attribute:control-group-username>Username</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-new-password data-dfn-type=attr-value><code>new-password</code></dfn>"
     <td>A new password (e.g. when creating an account or changing a password)
     <td>Free-form text, no newlines
     <td>GUMFXbadyrS3
     <td><a href=#control-group-password id=autofilling-form-controls:-the-autocomplete-attribute:control-group-password>Password</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-current-password data-dfn-type=attr-value><code>current-password</code></dfn>"
     <td>The current password for the account identified by the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-username-2><a href=#attr-fe-autocomplete-username>username</a></code> field (e.g. when logging in)
     <td>Free-form text, no newlines
     <td>qwerty 
     <td><a href=#control-group-password id=autofilling-form-controls:-the-autocomplete-attribute:control-group-password-2>Password</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-one-time-code data-dfn-type=attr-value><code>one-time-code</code></dfn>"
     <td>One-time code used for verifying user identity
     <td>Free-form text, no newlines
     <td>123456
     <td><a href=#control-group-password id=autofilling-form-controls:-the-autocomplete-attribute:control-group-password-3>Password</a>
   <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-organization data-dfn-type=attr-value><code>organization</code></dfn>"
     <td>Company name corresponding to the person, address, or contact information in the other fields associated with this field
     <td>Free-form text, no newlines
     <td>World Wide Web Consortium
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-9>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-street-address data-dfn-type=attr-value><code>street-address</code></dfn>"
     <td>Street address (multiple lines, newlines preserved)
     <td>Free-form text
     <td>32 Vassar Street<br>
MIT Room 32-G524
     <td><a href=#control-group-multiline id=autofilling-form-controls:-the-autocomplete-attribute:control-group-multiline>Multiline</a>
    <tr><td rowspan=3 class=non-rectangular-cell-indentation>
      <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-line1 data-dfn-type=attr-value><code>address-line1</code></dfn>"
      <td rowspan=3>Street address (one line per field)
      <td>Free-form text, no newlines
      <td>32 Vassar Street
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-10>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-line2 data-dfn-type=attr-value><code>address-line2</code></dfn>"
      <td>Free-form text, no newlines
      <td>MIT Room 32-G524
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-11>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-line3 data-dfn-type=attr-value><code>address-line3</code></dfn>"
      <td>Free-form text, no newlines
      <td>
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-12>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-level4 data-dfn-type=attr-value><code>address-level4</code></dfn>"
     <td>The most fine-grained <a href=#more-on-address-levels>administrative level</a>, in
     addresses with four administrative levels
     <td>Free-form text, no newlines
     <td>
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-13>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-level3 data-dfn-type=attr-value><code>address-level3</code></dfn>"
     <td>The <a href=#more-on-address-levels>third administrative level</a>, in addresses with
     three or more administrative levels
     <td>Free-form text, no newlines
     <td>
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-14>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-level2 data-dfn-type=attr-value><code>address-level2</code></dfn>"
     <td>The <a href=#more-on-address-levels>second administrative level</a>, in addresses with
     two or more administrative levels; in the countries with two administrative levels, this would
     typically be the city, town, village, or other locality within which the relevant street
     address is found
     <td>Free-form text, no newlines
     <td>Cambridge
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-15>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-level1 data-dfn-type=attr-value><code>address-level1</code></dfn>"
     <td>The broadest <a href=#more-on-address-levels>administrative level</a> in the address,
     i.e. the province within which the locality is found; for example, in the US, this would be the
     state; in Switzerland it would be the canton; in the UK, the post town
     <td>Free-form text, no newlines
     <td>MA
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-16>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-country data-dfn-type=attr-value><code>country</code></dfn>"
     <td>Country code
     <td>Valid <a href=https://www.iso.org/iso-3166-country-codes.html>ISO 3166-1-alpha-2 country code</a> <a href=references.html#refsISO3166>[ISO3166]</a>
     <td>US
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-17>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-country-name data-dfn-type=attr-value><code>country-name</code></dfn>"
     <td>Country name
     <td>Free-form text, no newlines; <a href=#autofill-country>derived from <code>country</code> in some cases</a>
     <td>US
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-18>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-postal-code data-dfn-type=attr-value><code>postal-code</code></dfn>"
     <td>Postal code, post code, ZIP code, CEDEX code (if CEDEX, append "CEDEX", and the <i lang=fr>arrondissement</i>, if relevant, to the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level2-2><a href=#attr-fe-autocomplete-address-level2>address-level2</a></code> field)
     <td>Free-form text, no newlines
     <td>02139
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-19>Text</a>
   <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-name data-dfn-type=attr-value><code>cc-name</code></dfn>"
     <td>Full name as given on the payment instrument
     <td>Free-form text, no newlines
     <td>Tim Berners-Lee
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-20>Text</a>
    <tr><td rowspan=3 class=non-rectangular-cell-indentation>
      <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-given-name data-dfn-type=attr-value><code>cc-given-name</code></dfn>"
      <td>Given name as given on the payment instrument (in some Western cultures, also known as the <i>first name</i>)
      <td>Free-form text, no newlines
      <td>Tim
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-21>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-additional-name data-dfn-type=attr-value><code>cc-additional-name</code></dfn>"
      <td>Additional names given on the payment instrument (in some Western cultures, also known as <i>middle names</i>, forenames other than the first name)
      <td>Free-form text, no newlines
      <td>
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-22>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-family-name data-dfn-type=attr-value><code>cc-family-name</code></dfn>"
      <td>Family name given on the payment instrument (in some Western cultures, also known as the <i>last name</i> or <i>surname</i>)
      <td>Free-form text, no newlines
      <td>Berners-Lee
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-23>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-number data-dfn-type=attr-value><code>cc-number</code></dfn>"
     <td>Code identifying the payment instrument (e.g. the credit card number)
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>
     <td>4114360123456785 
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-24>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-exp data-dfn-type=attr-value><code>cc-exp</code></dfn>"
     <td>Expiration date of the payment instrument
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-month-string href=common-microsyntaxes.html#valid-month-string>Valid month string</a>
     <td>2014-12
     <td><a href=#control-group-month id=autofilling-form-controls:-the-autocomplete-attribute:control-group-month>Month</a>
    <tr><td rowspan=2 class=non-rectangular-cell-indentation>
      <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-exp-month data-dfn-type=attr-value><code>cc-exp-month</code></dfn>"
      <td>Month component of the expiration date of the payment instrument
      <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-integer href=common-microsyntaxes.html#valid-integer>Valid integer</a> in the range 1..12
      <td>12
      <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric>Numeric</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-exp-year data-dfn-type=attr-value><code>cc-exp-year</code></dfn>"
      <td>Year component of the expiration date of the payment instrument
      <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-integer-2 href=common-microsyntaxes.html#valid-integer>Valid integer</a> greater than zero
      <td>2014
      <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-2>Numeric</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-csc data-dfn-type=attr-value><code>cc-csc</code></dfn>"
     <td>Security code for the payment instrument (also known as the card security code (CSC), card validation code (CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc.)
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-2 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>
     <td>419
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-25>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-type data-dfn-type=attr-value><code>cc-type</code></dfn>"
     <td>Type of payment instrument
     <td>Free-form text, no newlines
     <td>Visa
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-26>Text</a>
   <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-transaction-currency data-dfn-type=attr-value><code>transaction-currency</code></dfn>"
     <td>The currency that the user would prefer the transaction to use
     <td>ISO 4217 currency code <a href=references.html#refsISO4217>[ISO4217]</a>
     <td>GBP
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-27>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-transaction-amount data-dfn-type=attr-value><code>transaction-amount</code></dfn>"
     <td>The amount that the user would like for the transaction (e.g. when entering a bid or sale price)
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-floating-point-number href=common-microsyntaxes.html#valid-floating-point-number>Valid floating-point number</a>
     <td>401.00
     <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-3>Numeric</a>
   <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-language data-dfn-type=attr-value><code>language</code></dfn>"
     <td>Preferred language
     <td>Valid BCP 47 language tag <a href=references.html#refsBCP47>[BCP47]</a>
     <td>en
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-28>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-bday data-dfn-type=attr-value><code>bday</code></dfn>"
     <td>Birthday
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-date-string href=common-microsyntaxes.html#valid-date-string>Valid date string</a>
     <td>1955-06-08
     <td><a href=#control-group-date id=autofilling-form-controls:-the-autocomplete-attribute:control-group-date>Date</a>
    <tr><td rowspan=3 class=non-rectangular-cell-indentation>
      <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-bday-day data-dfn-type=attr-value><code>bday-day</code></dfn>"
      <td>Day component of birthday
      <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-integer-3 href=common-microsyntaxes.html#valid-integer>Valid integer</a> in the range 1..31
      <td>8
      <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-4>Numeric</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-bday-month data-dfn-type=attr-value><code>bday-month</code></dfn>"
      <td>Month component of birthday
      <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-integer-4 href=common-microsyntaxes.html#valid-integer>Valid integer</a> in the range 1..12
      <td>6
      <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-5>Numeric</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-bday-year data-dfn-type=attr-value><code>bday-year</code></dfn>"
      <td>Year component of birthday
      <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-integer-5 href=common-microsyntaxes.html#valid-integer>Valid integer</a> greater than zero
      <td>1955
      <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-6>Numeric</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-sex data-dfn-type=attr-value><code>sex</code></dfn>"
     <td>Gender identity (e.g. Female, Fa'afafine)
     <td>Free-form text, no newlines
     <td>Male
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-29>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-url data-dfn-type=attr-value><code>url</code></dfn>"
     <td>Home page or other web page corresponding to the company, person, address, or contact information in the other fields associated with this field
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-url-string href=https://url.spec.whatwg.org/#valid-url-string data-x-internal=valid-url-string>Valid URL string</a>
     <td>https://www.w3.org/People/Berners-Lee/
     <td><a href=#control-group-url id=autofilling-form-controls:-the-autocomplete-attribute:control-group-url>URL</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-photo data-dfn-type=attr-value><code>photo</code></dfn>"
     <td>Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field
     <td> <a id=autofilling-form-controls:-the-autocomplete-attribute:valid-url-string-2 href=https://url.spec.whatwg.org/#valid-url-string data-x-internal=valid-url-string>Valid URL string</a>
     <td>https://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg
     <td> <a href=#control-group-url id=autofilling-form-controls:-the-autocomplete-attribute:control-group-url-2>URL</a>
   <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel data-dfn-type=attr-value><code>tel</code></dfn>"
     <td>Full telephone number, including country code
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-3 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> and U+0020 SPACE characters, prefixed by a U+002B PLUS SIGN character (+)
     <td>+1 617 253 5702
     <td><a href=#control-group-tel id=autofilling-form-controls:-the-autocomplete-attribute:control-group-tel>Tel</a>
    <tr><td rowspan=6 class=non-rectangular-cell-indentation>
      <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-country-code data-dfn-type=attr-value><code>tel-country-code</code></dfn>"
      <td>Country code component of the telephone number
      <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-4 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> prefixed by a U+002B PLUS SIGN character (+)
      <td>+1
      <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-30>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-national data-dfn-type=attr-value><code>tel-national</code></dfn>"
      <td>Telephone number without the county code component, with a country-internal prefix applied if applicable
      <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-5 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> and U+0020 SPACE characters
      <td>617 253 5702
      <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-31>Text</a>
    <tr><td rowspan=4 class=non-rectangular-cell-indentation>
       <td colspan=2>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-area-code data-dfn-type=attr-value><code>tel-area-code</code></dfn>"
       <td>Area code component of the telephone number, with a country-internal prefix applied if applicable
       <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-6 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>
       <td>617
       <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-32>Text</a>
    <tr><td colspan=2>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-local data-dfn-type=attr-value><code>tel-local</code></dfn>"
       <td>Telephone number without the country code and area code components
       <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-7 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>
       <td>2535702
       <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-33>Text</a>
    <tr><td rowspan=2 class=non-rectangular-cell-indentation>
        <td>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-local-prefix data-dfn-type=attr-value><code>tel-local-prefix</code></dfn>"
        <td>First part of the component of the telephone number that follows the area code, when that component is split into two components
        <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-8 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>
        <td>253
        <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-34>Text</a>
    <tr><td>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-local-suffix data-dfn-type=attr-value><code>tel-local-suffix</code></dfn>"
        <td>Second part of the component of the telephone number that follows the area code, when that component is split into two components
        <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-9 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>
        <td>5702
        <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-35>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-extension data-dfn-type=attr-value><code>tel-extension</code></dfn>"
     <td>Telephone number internal extension code
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-10 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>
     <td>1000
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-36>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-email data-dfn-type=attr-value><code>email</code></dfn>"
     <td>Email address
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-e-mail-address href=input.html#valid-e-mail-address>Valid email address</a>
     <td>timbl@w3.org
     <td><a href=#control-group-username id=autofilling-form-controls:-the-autocomplete-attribute:control-group-username-2>Username</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-impp data-dfn-type=attr-value><code>impp</code></dfn>"
     <td>URL representing an instant messaging protocol endpoint (for example, "<code>aim:goim?screenname=example</code>" or "<code>xmpp:fred@example.net</code>")
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-url-string-3 href=https://url.spec.whatwg.org/#valid-url-string data-x-internal=valid-url-string>Valid URL string</a>
     <td>irc://example.org/timbl,isuser
     <td><a href=#control-group-url id=autofilling-form-controls:-the-autocomplete-attribute:control-group-url-3>URL</a>
  </table>

  <p>The groups correspond to controls as follows:</p>

  <dl><dt><dfn id=control-group-text>Text</dfn>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-3><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-2">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-4><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-3><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)">Text</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-5><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-4><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-2">Search</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element><a href=form-elements.html#the-select-element>select</a></code> elements

   <dt><dfn id=control-group-multiline>Multiline</dfn>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-6><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-5><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-3">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-3><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-2><a href=form-elements.html#the-select-element>select</a></code> elements

   <dt><dfn id=control-group-password>Password</dfn>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-7><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-6><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-4">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-8><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-7><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-3">Text</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-9><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-8><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-4">Search</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-10><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-9><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#password-state-(type=password)" id="autofilling-form-controls:-the-autocomplete-attribute:password-state-(type=password)">Password</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-4><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-3><a href=form-elements.html#the-select-element>select</a></code> elements

   <dt><dfn id=control-group-url>URL</dfn>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-11><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-10><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-5">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-12><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-11><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-5">Text</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-13><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-12><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-6">Search</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-14><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-13><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#url-state-(type=url)" id="autofilling-form-controls:-the-autocomplete-attribute:url-state-(type=url)">URL</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-5><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-4><a href=form-elements.html#the-select-element>select</a></code> elements

   <dt><dfn id=control-group-username>Username</dfn><span id=control-group-e-mail></span>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-15><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-14><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-6">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-16><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-15><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-7">Text</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-17><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-16><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-8">Search</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-18><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-17><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#email-state-(type=email)" id="autofilling-form-controls:-the-autocomplete-attribute:email-state-(type=email)">Email</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-6><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-5><a href=form-elements.html#the-select-element>select</a></code> elements

   <dt><dfn id=control-group-tel>Tel</dfn>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-19><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-18><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-7">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-20><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-19><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-9">Text</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-21><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-20><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-10">Search</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-22><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-21><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#telephone-state-(type=tel)" id="autofilling-form-controls:-the-autocomplete-attribute:telephone-state-(type=tel)">Telephone</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-7><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-6><a href=form-elements.html#the-select-element>select</a></code> elements

   <dt><dfn id=control-group-numeric>Numeric</dfn>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-23><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-22><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-8">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-24><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-23><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-11">Text</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-25><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-24><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-12">Search</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-26><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-25><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#number-state-(type=number)" id="autofilling-form-controls:-the-autocomplete-attribute:number-state-(type=number)">Number</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-8><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-7><a href=form-elements.html#the-select-element>select</a></code> elements

   <dt><dfn id=control-group-month>Month</dfn>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-27><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-26><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-9">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-28><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-27><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-13">Text</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-29><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-28><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-14">Search</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-30><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-29><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#month-state-(type=month)" id="autofilling-form-controls:-the-autocomplete-attribute:month-state-(type=month)">Month</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-9><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-8><a href=form-elements.html#the-select-element>select</a></code> elements

   <dt><dfn id=control-group-date>Date</dfn>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-31><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-30><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-10">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-32><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-31><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-15">Text</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-33><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-32><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-16">Search</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-34><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-33><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#date-state-(type=date)" id="autofilling-form-controls:-the-autocomplete-attribute:date-state-(type=date)">Date</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-10><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-9><a href=form-elements.html#the-select-element>select</a></code> elements


  </dl>

  <p id=more-on-address-levels><strong>Address levels</strong>: The "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level1-2><a href=#attr-fe-autocomplete-address-level1>address-level1</a></code>" – "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level4-2><a href=#attr-fe-autocomplete-address-level4>address-level4</a></code>" fields are used to describe
  the locality of the street address. Different locales have different numbers of levels. For
  example, the US uses two levels (state and town), the UK uses one or two depending on the address
  (the post town, and in some cases the locality), and China can use three (province, city,
  district). The "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level1-3><a href=#attr-fe-autocomplete-address-level1>address-level1</a></code>" field
  represents the widest administrative division. Different locales order the fields in different
  ways; for example, in the US the town (level 2) precedes the state (level 1); while in Japan the
  prefecture (level 1) precedes the city (level 2) which precedes the district (level 3). Authors
  are encouraged to provide forms that are presented in a way that matches the country's conventions
  (hiding, showing, and rearranging fields accordingly as the user changes the country).</p>


  


  <h4 id=textFieldSelection><span class=secno>4.10.20</span> APIs for the text control selections<a href=#textFieldSelection class=self-link></a></h4>

  

  <p>The <code id=textFieldSelection:the-input-element><a href=input.html#the-input-element>input</a></code> and <code id=textFieldSelection:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> elements define several attributes and methods
  for handling their selection. Their shared algorithms are defined here.</p>

  

  <dl class=domintro><dt><code><var>element</var>.<span id=dom-textarea/input-select>select</span>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select title="The HTMLInputElement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field.">HTMLInputElement/select</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select title="The HTMLInputElement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field.">HTMLInputElement/select</a></div></div><dd><p>Selects everything in the text control.<dt><code><var>element</var>.<span id=dom-textarea/input-selectionstart>selectionStart</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the offset to the start of the selection.</p>

    <p>Can be set, to change the start of the selection.</p>
   <dt><code><var>element</var>.<span id=dom-textarea/input-selectionend>selectionEnd</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the offset to the end of the selection.</p>

    <p>Can be set, to change the end of the selection.</p>
   <dt><code><var>element</var>.<span id=dom-textarea/input-selectiondirection>selectionDirection</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the current direction of the selection.</p>

    <p>Can be set, to change the direction of the selection.</p>

    <p>The possible values are "<code>forward</code>", "<code>backward</code>",
    and "<code>none</code>".</p>
   <dt><code><var>element</var>.<span id=dom-textarea/input-setselectionrange>setSelectionRange</span>(<var>start</var>, <var>end</var> [, <var>direction</var>])</code><dd>
    <p>Changes the selection to cover the given substring in the given direction. If the direction
    is omitted, it will be reset to be the platform default (none or forward).</p>
   <dt><code><var>element</var>.<span id=dom-textarea/input-setrangetext>setRangeText</span>(<var>replacement</var> [, <var>start</var>, <var>end</var> [, <var>selectionMode</var> ] ])</code><dd>
    <p>Replaces a range of text with the new text. If the <var>start</var> and <var>end</var>
    arguments are not provided, the range is assumed to be the selection.</p>

    <p>The final argument determines how the selection will be set after the text has been replaced.
    The possible values are:</p>

    <dl><dt>"<code id=dom-selectionmode-select>select</code>"<dd>Selects the newly inserted text.<dt>"<code id=dom-selectionmode-start>start</code>"<dd>Moves the selection to just before the inserted text.<dt>"<code id=dom-selectionmode-end>end</code>"<dd>Moves the selection to just after the selected text.<dt>"<code id=dom-selectionmode-preserve>preserve</code>"<dd>Attempts to preserve the selection. This is the default.</dl>
   </dl>

  

  <div class=example>

   <p>To obtain the currently selected text, the following JavaScript suffices:</p>

   <pre><code class='js'><c- a>var</c-> selectionText <c- o>=</c-> control<c- p>.</c->value<c- p>.</c->substring<c- p>(</c->control<c- p>.</c->selectionStart<c- p>,</c-> control<c- p>.</c->selectionEnd<c- p>);</c-></code></pre>

   <p>...where <var>control</var> is the <code id=textFieldSelection:the-input-element-2><a href=input.html#the-input-element>input</a></code> or <code id=textFieldSelection:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code>
   element.</p>

  </div>

  <div class=example>

   <p>To add some text at the start of a text control, while maintaining the text selection, the
   three attributes must be preserved:</p>

   <pre><code class='js'><c- a>var</c-> oldStart <c- o>=</c-> control<c- p>.</c->selectionStart<c- p>;</c->
<c- a>var</c-> oldEnd <c- o>=</c-> control<c- p>.</c->selectionEnd<c- p>;</c->
<c- a>var</c-> oldDirection <c- o>=</c-> control<c- p>.</c->selectionDirection<c- p>;</c->
<c- a>var</c-> prefix <c- o>=</c-> <c- u>&quot;http://&quot;</c-><c- p>;</c->
control<c- p>.</c->value <c- o>=</c-> prefix <c- o>+</c-> control<c- p>.</c->value<c- p>;</c->
control<c- p>.</c->setSelectionRange<c- p>(</c->oldStart <c- o>+</c-> prefix<c- p>.</c->length<c- p>,</c-> oldEnd <c- o>+</c-> prefix<c- p>.</c->length<c- p>,</c-> oldDirection<c- p>);</c-></code></pre>

   <p>...where <var>control</var> is the <code id=textFieldSelection:the-input-element-3><a href=input.html#the-input-element>input</a></code> or <code id=textFieldSelection:the-textarea-element-3><a href=form-elements.html#the-textarea-element>textarea</a></code>
   element.</p>

  </div>



  <h4 id=constraints><span class=secno>4.10.21</span> Constraints<a href=#constraints class=self-link></a></h4>

  



  



  <h5 id=the-constraint-validation-api><span class=secno>4.10.21.1</span> The <dfn>constraint validation API</dfn><a href=#the-constraint-validation-api class=self-link></a></h5>

  <dl class=domintro><dt><code><var>element</var>.<span id=dom-cva-willvalidate>willValidate</span></code><dd>
    <p>Returns true if the element will be validated when the form is submitted; false
    otherwise.</p>
   <dt><code><var>element</var>.<span id=dom-cva-setcustomvalidity>setCustomValidity</span>(<var>message</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity title="The HTMLInputElement.setCustomValidity() method sets a custom validity message for the element.">HTMLInputElement/setCustomValidity</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Sets a custom error, so that the element would fail to validate. The given message is the
    message to be shown to the user when reporting the problem to the user.</p>

    <p>If the argument is the empty string, clears the custom error.</p>
   <dt><code><var>element</var>.<span>validity</span>.<span id=dom-validitystate-valuemissing>valueMissing</span></code><dd><p>Returns true if the element has no value but is a required field; false
   otherwise.<dt><code><var>element</var>.<span>validity</span>.<span id=dom-validitystate-typemismatch>typeMismatch</span></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/typeMismatch title="The read-only typeMismatch property of a ValidityState object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's type attribute.">ValidityState/typeMismatch</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Returns true if the element's value is not in the correct syntax; false
   otherwise.<dt><code><var>element</var>.<span>validity</span>.<span id=dom-validitystate-patternmismatch>patternMismatch</span></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/patternMismatch title="The read-only patternMismatch property of a ValidityState object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's pattern attribute.">ValidityState/patternMismatch</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Returns true if the element's value doesn't match the provided pattern; false
   otherwise.<dt><code><var>element</var>.<span>validity</span>.<span id=dom-validitystate-toolong>tooLong</span></code><dd>
    <p>Returns true if the element's value is longer than the provided maximum length; false
    otherwise.</p>
   <dt><code><var>element</var>.<span>validity</span>.<span id=dom-validitystate-tooshort>tooShort</span></code><dd>
    <p>Returns true if the element's value, if it is not the empty string, is shorter than the
    provided minimum length; false otherwise.</p>
   <dt><code><var>element</var>.<span>validity</span>.<span id=dom-validitystate-rangeunderflow>rangeUnderflow</span></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeUnderflow title="The read-only rangeUnderflow property of a ValidityState object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's min attribute.">ValidityState/rangeUnderflow</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Returns true if the element's value is lower than the provided minimum; false
   otherwise.<dt><code><var>element</var>.<span>validity</span>.<span id=dom-validitystate-rangeoverflow>rangeOverflow</span></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeOverflow title="The read-only rangeOverflow property of a ValidityState object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's max attribute.">ValidityState/rangeOverflow</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Returns true if the element's value is higher than the provided maximum; false
   otherwise.<dt><code><var>element</var>.<span>validity</span>.<span id=dom-validitystate-stepmismatch>stepMismatch</span></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/stepMismatch title="The read-only stepMismatch property of a ValidityState object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's step attribute.">ValidityState/stepMismatch</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Returns true if the element's value doesn't fit the rules given by the <code id=the-constraint-validation-api:attr-input-step><a href=input.html#attr-input-step>step</a></code> attribute; false otherwise.<dt><code><var>element</var>.<span>validity</span>.<span id=dom-validitystate-badinput>badInput</span></code><dd>
    <p>Returns true if the user has provided input in the user interface that the user agent is
    unable to convert to a value; false otherwise.</p>
   <dt><code><var>element</var>.<span>validity</span>.<span id=dom-validitystate-customerror>customError</span></code><dd><p>Returns true if the element has a custom error; false otherwise.<dt><code><var>element</var>.<span>validity</span>.<span id=dom-validitystate-valid>valid</span></code><dd><p>Returns true if the element's value has no validity problems; false otherwise.<dt><code><var>valid</var> = <var>element</var>.<span id=dom-cva-checkvalidity>checkValidity</span>()</code><dd><p>Returns true if the element's value has no validity problems; false otherwise. Fires an
   <code id=the-constraint-validation-api:event-invalid><a href=indices.html#event-invalid>invalid</a></code> event at the element in the latter case.<dt><code><var>valid</var> = <var>element</var>.<span id=dom-cva-reportvalidity>reportValidity</span>()</code><dd>
    <p>Returns true if the element's value has no validity problems; otherwise, returns false, fires
    an <code id=the-constraint-validation-api:event-invalid-2><a href=indices.html#event-invalid>invalid</a></code> event at the element, and (if the event isn't
    canceled) reports the problem to the user.</p>
   <dt><code><var>element</var>.<span id=dom-cva-validationmessage>validationMessage</span></code><dd>
    <p>Returns the error message that would be shown to the user if the element was to be checked
    for validity.</p>
   </dl>

  

  <div class=example>

   <p>In the following example, a script checks the value of a form control each time it is edited,
   and whenever it is not a valid value, uses the <code id=the-constraint-validation-api:dom-cva-setcustomvalidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code> method to set an appropriate
   message.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->Feeling: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>f</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>oninput</c-><c- o>=</c-><c- s>&quot;check(this)&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>function</c-> check<c- p>(</c->input<c- p>)</c-> <c- p>{</c->
   <c- k>if</c-> <c- p>(</c->input<c- p>.</c->value <c- o>==</c-> <c- u>&quot;good&quot;</c-> <c- o>||</c->
       input<c- p>.</c->value <c- o>==</c-> <c- u>&quot;fine&quot;</c-> <c- o>||</c->
       input<c- p>.</c->value <c- o>==</c-> <c- u>&quot;tired&quot;</c-><c- p>)</c-> <c- p>{</c->
     input<c- p>.</c->setCustomValidity<c- p>(</c-><c- t>&apos;&quot;&apos;</c-> <c- o>+</c-> input<c- p>.</c->value <c- o>+</c-> <c- t>&apos;&quot; is not a feeling.&apos;</c-><c- p>);</c->
   <c- p>}</c-> <c- k>else</c-> <c- p>{</c->
     <c- c1>// input is fine -- reset the error message</c->
     input<c- p>.</c->setCustomValidity<c- p>(</c-><c- t>&apos;&apos;</c-><c- p>);</c->
   <c- p>}</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  </div>

  


  <h5 id=security-forms><span class=secno>4.10.21.2</span> Security<a href=#security-forms class=self-link></a></h5>

  <p id=security-0>Servers should not rely on client-side validation. Client-side validation can
  be intentionally bypassed by hostile users, and unintentionally bypassed by users of older user
  agents or automated tools that do not implement these features. The constraint validation features
  are only intended to improve the user experience, not to provide any kind of security
  mechanism.</p>




  <h4 id=form-submission-2><span class=secno>4.10.22</span> <dfn id=form-submission>Form submission</dfn><a href=#form-submission-2 class=self-link></a></h4>

  

  

  <p>When a form is submitted, the data in the form is converted into the structure specified by the
  <a href=#concept-fs-enctype id=form-submission-2:concept-fs-enctype>enctype</a>, and then sent to the destination specified by the
  <a href=#concept-fs-action id=form-submission-2:concept-fs-action>action</a> using the given <a href=#concept-fs-method id=form-submission-2:concept-fs-method>method</a>.</p>

  <p>For example, take the following form:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;/find.cgi&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>get</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>t</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>search</c-> <c- e>name</c-><c- o>=</c-><c- s>q</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  <p>If the user types in "cats" in the first field and "fur" in the second, and then hits the
  submit button, then the user agent will load <code>/find.cgi?t=cats&amp;q=fur</code>.</p>

  <p>On the other hand, consider this form:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;/find.cgi&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>post</c-> <c- e>enctype</c-><c- o>=</c-><c- s>&quot;multipart/form-data&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>t</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>search</c-> <c- e>name</c-><c- o>=</c-><c- s>q</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  <p>Given the same user input, the result on submission is quite different: the user agent instead
  does an HTTP POST to the given URL, with as the entity body something like the following text:</p>

  <pre>------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="t"

cats
------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="q"

fur
------kYFrd4jNJEgCervE--</pre>



  


  


  

  


  <h5 id=url-encoded-form-data><span class=secno>4.10.22.1</span> URL-encoded form data<a href=#url-encoded-form-data class=self-link></a></h5>

  <p id=application-x-www-form-urlencoded-encoding-algorithm><span id=application/x-www-form-urlencoded-encoding-algorithm></span>See <cite>URL</cite> for details
  on <code id=url-encoded-form-data:application/x-www-form-urlencoded><a data-x-internal=application/x-www-form-urlencoded href=https://url.spec.whatwg.org/#concept-urlencoded>application/x-www-form-urlencoded</a></code>. <a href=references.html#refsURL>[URL]</a></p>


  <h5 id=multipart-form-data><span class=secno>4.10.22.2</span> Multipart form data<a href=#multipart-form-data class=self-link></a></h5>

  

  <p>For details on how to interpret <code id=multipart-form-data:multipart/form-data><a href=indices.html#multipart/form-data>multipart/form-data</a></code> payloads, see RFC 7578.
  <a href=references.html#refsRFC7578>[RFC7578]</a></p>


  <h5 id=plain-text-form-data><span class=secno>4.10.22.3</span> Plain text form data<a href=#plain-text-form-data class=self-link></a></h5>

  

  <p>Payloads using the <code id=plain-text-form-data:text/plain><a data-x-internal=text/plain href=https://www.rfc-editor.org/rfc/rfc2046#section-4.1.3>text/plain</a></code> format are intended to be human readable. They are
  not reliably interpretable by computer, as the format is ambiguous (for example, there is no way
  to distinguish a literal newline in a value from the newline at the end of the value).</p>

  <h5 id=the-submitevent-interface><span class=secno>4.10.22.4</span> The <code>SubmitEvent</code> interface<a href=#the-submitevent-interface class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent title="The SubmitEvent interface defines the object used to represent an HTML form's submit event. This event is fired at the <form> when the form's submit action is invoked.">SubmitEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>75+</span></span><span class="safari yes"><span>Safari</span><span>15+</span></span><span class="chrome yes"><span>Chrome</span><span>81+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>81+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <dl class=domintro><dt><code><var>event</var>.<span>submitter</span></code><dd><p>Returns the element representing the <a href=forms.html#concept-submit-button id=the-submitevent-interface:concept-submit-button>submit
   button</a> that triggered the <a href=#form-submission-2 id=the-submitevent-interface:form-submission-2>form submission</a>, or null if the submission was not
   triggered by a button.</dl>

  

  <h5 id=the-formdataevent-interface><span class=secno>4.10.22.5</span> The <code>FormDataEvent</code> interface<a href=#the-formdataevent-interface class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/FormDataEvent/FormDataEvent title="The FormDataEvent() constructor creates a new FormDataEvent object.">FormDataEvent/FormDataEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>72+</span></span><span class="safari yes"><span>Safari</span><span>15+</span></span><span class="chrome yes"><span>Chrome</span><span>77+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/FormDataEvent title="The FormDataEvent interface represents a formdata event — such an event is fired on an HTMLFormElement object after the entry list representing the form's data is constructed. This happens when the form is submitted, but can also be triggered by the invocation of a FormData() constructor.">FormDataEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>72+</span></span><span class="safari yes"><span>Safari</span><span>15+</span></span><span class="chrome yes"><span>Chrome</span><span>77+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <dl class=domintro><dt><code><var>event</var>.<span>formData</span></code><dd>
    <p>Returns a <code id=the-formdataevent-interface:formdata><a data-x-internal=formdata href=https://xhr.spec.whatwg.org/#formdata>FormData</a></code> object representing names and values of elements associated
    to the target <code id=the-formdataevent-interface:the-form-element><a href=forms.html#the-form-element>form</a></code>. Operations on the <code id=the-formdataevent-interface:formdata-2><a data-x-internal=formdata href=https://xhr.spec.whatwg.org/#formdata>FormData</a></code> object will affect form
    data to be submitted.</p>
   </dl>

  



  <nav><a href=form-elements.html>← 4.10.6 The button element</a> — <a href=index.html>Table of Contents</a> — <a href=interactive-elements.html>4.11 Interactive elements →</a></nav>
